import React from 'react';
import { CheckCircleOutlined } from '@ant-design/icons';
import CommandOutput from './CommandOutput';

interface CommandStepProps {
  command: string;
  output?: string;
}

const CommandStep: React.FC<CommandStepProps> = ({ command, output }) => {
  const hasOutput = !!output && output.trim().length > 0;

  return (
    <div className="command-step">
      <div className="command-step-header">
        <div className="command-step-title">
          <CheckCircleOutlined style={{ color: '#52c41a', fontSize: 16 }} />
          <span>命令执行</span>
        </div>
      </div>
      <div className="command-step-desc">
        助手在当前项目中执行了以下命令：
      </div>
      <div className="command-step-command">
        <code>{command}</code>
      </div>
      {hasOutput && (
        <CommandOutput text={output!} />
      )}
    </div>
  );
};

export default CommandStep;

